<template>
	<view class="gaodeMap">
		<!-- 地图 -->
		<view class="map" :style="{ height: windowHeight * 2 + 'rpx'}" id="container">
			<!-- 头部展示 -->
			<view class="flex-between map-title-view">
				<view class="map-title-item">
					<view class="fontSize-14 color-333 margin-bottom20">崩塌滑坡</view>
					<view class="flex-alignItems-center">
						<view class="color-000 fontWeight-bold" style="font-size: 23px;">185,44</view>
						<view class="margin-left10">
							<u-icon name="arrow-upward" v-if="true" color="#11AA66" size="13"></u-icon>
							<u-icon name="arrow-downward" v-else color="#EF3C34" size="13"></u-icon>
						</view>
					</view>
				</view>
				<view class="map-title-item1">
					<view class="fontSize-14 color-333 margin-bottom20">崩塌滑坡</view>
					<view class="flex-alignItems-center">
						<view class="color-000 fontWeight-bold" style="font-size: 23px;">185,44</view>
						<view class="margin-left10">
							<u-icon name="arrow-upward" v-if="true" color="#11AA66" size="13"></u-icon>
							<u-icon name="arrow-downward" v-else color="#EF3C34" size="13"></u-icon>
						</view>
					</view>
				</view>
				<view class="map-title-item2">
					<view class="fontSize-14 color-333 margin-bottom20">崩塌滑坡</view>
					<view class="flex-alignItems-center">
						<view class="color-000 fontWeight-bold" style="font-size: 23px;">185,44</view>
						<view class="margin-left10">
							<u-icon name="arrow-upward" v-if="true" color="#11AA66" size="13"></u-icon>
							<u-icon name="arrow-downward" v-else color="#EF3C34" size="13"></u-icon>
						</view>
					</view>
				</view>
			</view>

			<!-- 地图弹窗 -->
			<!-- <image class="map-choose-image img-crisp-edges" @click="mapChooseShow = true"
				src="../../static/index/04.png" mode=""></image> -->
			<!-- 地图搜索 -->
			<!-- <image class="map-choose-image1 img-crisp-edges" @click="handleSearchPopup" src="../../static/index/05.png"
				mode=""></image> -->
			<!-- 地图定位 -->
			<!-- <image class="map-choose-image2 img-crisp-edges" src="../../static/index/06.png" mode=""></image> -->
			<!-- 类型弹窗 -->
			<view class="map-choose-image3View" @click="chooseTypeCoordinate">
				<!-- <image class="map-choose-image3 img-crisp-edges" v-if="IsCoordinate" src="../../static/index/07.png"
					mode=""></image> -->
				<!-- <image class="map-choose-image3 img-crisp-edges" v-else src="../../static/index/08.png" mode=""></image> -->
			</view>
			<view class="map-coordinate-view flex-justAliCenter-column" v-if="IsCoordinate">
				<view class="flex-center margin-bottom20" @click="riskShow = true">
					<view class=""></view>
					<view class="fontSize-13 color-808080">崩塌滑坡</view>
				</view>
				<view class="flex-center margin-bottom20">
					<view class=""></view>
					<view class="fontSize-13 color-808080">泥石流</view>
				</view>
				<view class="flex-center">
					<view class=""></view>
					<view class="fontSize-13 color-808080">沉陷水毁</view>
				</view>
			</view>

			<!-- 风险弹窗 -->
			<view class="risk-popup-view" v-if="IsCoordinate">
				<view class="flex-center" @click="CoordinateTitle">
					<view class="risk-popup-iconview">
					</view>
				</view>
				<view class="risk-popup-center">
					<view class="flex-between">
						<view class="fontSize-16 color-000">G1523 K330+745左侧G1523 K330+745左侧G1523 K330+745左侧</view>
						<view class="flex-alignItems-center margin-left20">
							<view class="class-icon-view flex-center">
								Ⅰ类
							</view>
							<view class="level-icon-view flex-center">
								四级
							</view>
						</view>
					</view>
					<view class="fontSize-15 color-4D4D4D margin-30-0">
						绍兴市柯桥区 甬台温复线温州瑞安至苍南
					</view>
					<view class="fontSize-15 color-4D4D4D">
						ZJ-TZ-SM-G1523-09
					</view>
				</view>
			</view>

			<!-- 风险弹窗详情 -->
			<view class="risk-popup-view1" v-if="riskShowInfo">
				<view class="flex-center f-divider1 padding-bottom30" style="position: relative;"
					@click="CoordinateTitle1">
					<view class="risk-popup-iconview"></view>
					<!-- <image class="message-info-view" @click.stop="messageShow" src="../../static/index/09.png" mode=""> -->
					</image>
					<view class="message-info-imageView" v-if="ismessageShow">
						<view class="message-info-text">更多信息请前往web端进行查看</view>
						<view class="message-info-texticon"></view>
					</view>
				</view>
				<view class="risk-popup-center" style="position: relative;">
					<view class="fontSize-18 color-000">
						G1523 K330+745左侧
					</view>
					<scroll-view scroll-x="true" class="scroll-Y" show-scrollbar>
						<view class="flex-alignItems-center riskInfo-image-view">
							<image class="riskInfo-image" @click="$tools.previewImage('https://survey.chunchuangkeji.cn/images/11.jpg')"
								src="https://survey.chunchuangkeji.cn/images/11.jpg" mode=""></image>
							<!-- <image class="riskInfo-image" src="../../static/index/11.jpg" mode=""></image>
							<image class="riskInfo-image" src="../../static/index/11.jpg" mode=""></image> -->
						</view>
					</scroll-view>
					<!-- 列表 -->
					<view class="margin-top30">
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">项目区域:</view>
							<view class="fontSize-15 color-333">浙江省绍兴市柯桥区</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡类型:</view>
							<view class="fontSize-15 color-333">路堑边坡</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">工点编号:</view>
							<view class="fontSize-15 color-333">ZJ-TZ-SM-G1523-09</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">所属路线:</view>
							<view class="fontSize-15 color-333">国道G1523甬台温复线温州瑞安至苍南</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">中心里程:</view>
							<view class="fontSize-15 color-333">K330+745左侧</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">路程桩号:</view>
							<view class="fontSize-15 color-333">K350+750~K350+800</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">管理单位:</view>
							<view class="fontSize-15 color-333">柯桥区交通运输局</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">岩土结构:</view>
							<view class="fontSize-15 color-333">岩质</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡长度(m):
							</view>
							<view class="fontSize-15 color-333">40.00</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡高度(m):
							</view>
							<view class="fontSize-15 color-333">10.00</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡角度(°):
							</view>
							<view class="fontSize-15 color-333">66.00</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">边坡倾向(°):
							</view>
							<view class="fontSize-15 color-333">200.00</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">风险类别:</view>
							<view class="fontSize-15 color-333">Ⅰ类</view>
						</view>
						<view class="flex-alignItems-center margin-bottom30">
							<view class="fontSize-15 color-4D4D4D margin-right30" style="flex-shrink: 0;">风险等级:</view>
							<view class="fontSize-15 color-333">四级</view>
						</view>
					</view>
					<!-- <image class="riskInfo-list-image" src="../../static/index/10.png" mode=""></image> -->
				</view>
			</view>

			<!-- 搜索弹窗 -->
			<view class="map-search-popup" v-if="isSearchPopup">
				<view class="flex-center f-divider1 padding-bottom30 margin-bottom30">
					<view class="risk-popup-iconview"></view>
				</view>
				<u-search placeholder="路线编号/名称、工点编号/名称" shape="square" v-model="keyword" :showAction="false"></u-search>
				<!-- 列表 -->
				<view class="map-search-list" v-if="false">
					<view class="map-search-item">
						<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
						<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
							|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
					</view>
					<view class="map-search-item">
						<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
						<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
							|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
					</view>
					<view class="map-search-item">
						<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
						<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
							|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
					</view>
					<view class="map-search-item">
						<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
						<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
							|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
					</view>
					<view class="map-search-item">
						<view class="fontSize-13 margin-bottom10" style="color: #4B6DFD;">G1523 K330+745左侧</view>
						<view class="fontSize-13 color-4D4D4D" style="line-height: 1.8;">国道G1523甬台温复线温州瑞安至苍南
							|ZJ-TA-SM-G1523-09 | 浙江省温州市苍南县</view>
					</view>
				</view>
				<view class="map-search-list flex-justAliCenter-column">
					<!-- <image class="img-280" src="../../static/index/11.png" mode=""></image> -->
				</view>
			</view>

			<!-- 地图切换 -->
			<u-popup :show="mapChooseShow" :round="10" mode="right" :overlay="false" closeable @close="mapChooseClose">
				<view class="map-choose-popup">
					<view style="height: 100rpx;"></view>
					<view class="flex-justAliCenter-column margin-bottom30 map-item" v-for="(item,index) in mapTabList"
						:key="index" @click="handleMapChoose(index)"
						:class="mapChooseIndex == index?'map-choose-active':''">
						<image class="img-100 margin-bottom20" :src="item.image" mode="">
							<view class="fontSize-13 color-000">{{item.name}}</view>
					</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				windowHeight: '', // 默认高度
				IsCoordinate: false, // 类型弹窗
				riskShow: false, // 风险弹窗
				riskShowInfo: false, // 风险弹窗详情,
				ismessageShow: false, // 信息图标弹窗
				keyword: '', // 搜索框关键词
				isSearchPopup: false, // 搜索弹窗
				mapChooseShow: false, // 地图切换弹窗
				mapTabList: [{
						name: '标准地图',
						image: '../../static/index/12.png'
					},
					{
						name: '卫星地图',
						image: '../../static/index/12.png'
					}
				],
				mapChooseIndex: 0, //地图类型索引
			}
		},
		mounted() {
			//默认高度
			uni.getSystemInfo({
				success: res => {
					this.windowHeight = res.windowHeight;
				}
			})
		},
		methods: {
			// 地图类型切换
			handleMapChoose(index) {
				this.mapChooseIndex = index
				this.mapChooseShow = false
				uni.setStorageSync('mapIndex', this.mapChooseIndex) // 地图类型索引 0 标准地图，1 卫星地图
				location.reload()
			},
			// 地图选择关闭弹窗
			mapChooseClose() {
				this.mapChooseShow = false
			},
			// 展示搜索弹窗
			handleSearchPopup() {
				this.isSearchPopup = !this.isSearchPopup
			},
			// 展示图标信息弹窗
			messageShow() {
				this.ismessageShow = !this.ismessageShow
			},
			// 风险类型弹窗
			chooseTypeCoordinate() {
				this.IsCoordinate = !this.IsCoordinate
			},
			// 风险弹窗
			riskClose() {
				this.riskShow = false
			},
			// 风险弹窗展示详情
			CoordinateTitle() {
				this.riskShowInfo = true
				this.riskShow = false
			},
			// 风险弹窗详情展示弹窗
			CoordinateTitle1() {
				this.riskShow = true
				this.riskShowInfo = false
			}
		}
	}
</script>

<script module="allmap" lang="renderjs">
	import {
		myAMap
	} from "@/utils/amap.js";
	import {
		heatmapData
	} from "@/utils/amap.js";
	let amap;
	let marker;
	const _window = window;

	export default {
		data() {
			return {
				latitude: 22.543648,
				longitude: 114.057923,
				zoom: 5
			}
		},
		mounted() {
			this.getMapRender()
		},
		beforeDestroy() {
			// 离开页面销毁地图
			amap && amap.destroy();
			amap = null
			uni.removeStorageSync('mapIndex')
		},
		methods: {
			// 加载地图事件
			getMapRender() {
				console.log()
				if (uni.getStorageSync('mapIndex')) {
					let mapIndex = ''
					mapIndex = uni.getStorageSync('mapIndex')
					if (mapIndex == 0) {
						this.initMap()
					} else {
						this.initSatellite()
						this.mapChooseIndex = mapIndex
					}
				} else {
					this.initMap()
				}
			},
			// 添加覆盖物
			addMaker() {
				amap.add(marker);
				amap.setFitView();
			},
			// 卫星地图
			initSatellite() {
				myAMap().then(() => {
					amap = new AMap.Map('container', {
						viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
						zoom: 11, // 初始化地图层级
						layers: [new AMap.TileLayer.Satellite()],
						// center: [116.397428, 39.90923] // 初始化地图中心点
						center: [116.418261, 39.921984],
					});
				})
			},
			//获取地图信息
			initMap() {
				myAMap().then(() => {
					// // 创建地图实例
					// amap = new AMap.Map('container', {
					// 	zoom: 5, // 地图缩放比例
					// 	zooms: [4, 20], // 地图缩放区间
					// 	center: [114.057923, 22.543648], //设置经纬度为地图中心
					// 	resizeEnable: true, // 开启地图缩放
					// });
					amap = new AMap.Map('container', {
						viewMode: '2D', // 默认使用 2D 模式，如果希望使用带有俯仰角的 3D 模式，请设置 viewMode: '3D'
						zoom: 16, // 初始化地图层级
						layers: [ //只显示默认图层的时候，layers可以缺省
							AMap.createDefaultLayer() //高德默认标准图层
						],
						center: [116.397428, 39.90923] // 初始化地图中心点
					});

					//  设置个性化地图
					// var styleName = "amap://styles/" + 'darkblue'
					// amap.setMapStyle(styleName);

					// 构造点标记
					var markers = [{
						icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-1.png',
						position: [116.205467, 39.907761]
					}, {
						icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-2.png',
						position: [116.368904, 39.913423]
					}, {
						icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-3.png',
						position: [116.305467, 39.807761]
					}];

					// 添加一些分布不均的点到地图上,地图上添加三个点标记，作为参照
					markers.forEach(function(marker) {
						new AMap.Marker({
							map: amap,
							icon: marker.icon,
							position: [marker.position[0], marker.position[1]],
							offset: new AMap.Pixel(-13, -30)
						});
					});
					// amap.setFitView(markers, true, [150, 60, 100, 60]);

					var points = [{
	"lng": 116.191031,
	"lat": 39.988585,
	"count": 10
}, {
	"lng": 116.389275,
	"lat": 39.925818,
	"count": 11
}, {
	"lng": 116.287444,
	"lat": 39.810742,
	"count": 12
}, {
	"lng": 116.481707,
	"lat": 39.940089,
	"count": 13
}, {
	"lng": 116.410588,
	"lat": 39.880172,
	"count": 14
}, {
	"lng": 116.394816,
	"lat": 39.91181,
	"count": 15
}, {
	"lng": 116.416002,
	"lat": 39.952917,
	"count": 16
}, {
	"lng": 116.39671,
	"lat": 39.924903,
	"count": 17
}, {
	"lng": 116.180816,
	"lat": 39.957553,
	"count": 18
}, {
	"lng": 116.382035,
	"lat": 39.874114,
	"count": 19
}, {
	"lng": 116.316648,
	"lat": 39.914529,
	"count": 20
}, {
	"lng": 116.395803,
	"lat": 39.908556,
	"count": 21
}, {
	"lng": 116.74553,
	"lat": 39.875916,
	"count": 22
}, {
	"lng": 116.352289,
	"lat": 39.916475,
	"count": 23
}, {
	"lng": 116.441548,
	"lat": 39.878262,
	"count": 24
}, {
	"lng": 116.318947,
	"lat": 39.942735,
	"count": 25
}, {
	"lng": 116.382585,
	"lat": 39.941949,
	"count": 26
}, {
	"lng": 116.42042,
	"lat": 39.884017,
	"count": 27
}, {
	"lng": 116.31744,
	"lat": 39.892561,
	"count": 28
}, {
	"lng": 116.407059,
	"lat": 39.912438,
	"count": 29
}, {
	"lng": 116.412351,
	"lat": 39.888082,
	"count": 30
}, {
	"lng": 116.444341,
	"lat": 39.915891,
	"count": 31
}, {
	"lng": 116.335385,
	"lat": 39.741756,
	"count": 32
}, {
	"lng": 116.3926,
	"lat": 40.008733,
	"count": 33
}, {
	"lng": 116.389731,
	"lat": 39.92292,
	"count": 34
}, {
	"lng": 116.413371,
	"lat": 39.874483,
	"count": 35
}, {
	"lng": 116.199752,
	"lat": 39.911717,
	"count": 36
}, {
	"lng": 116.278472,
	"lat": 40.254994,
	"count": 37
}, {
	"lng": 116.464252,
	"lat": 39.925828,
	"count": 38
}, {
	"lng": 116.479475,
	"lat": 39.937945,
	"count": 39
}, {
	"lng": 116.415599,
	"lat": 39.956902,
	"count": 40
}, {
	"lng": 116.355675,
	"lat": 39.870089,
	"count": 41
}, {
	"lng": 116.295267,
	"lat": 39.987171,
	"count": 42
}, {
	"lng": 116.323634,
	"lat": 39.911692,
	"count": 43
}, {
	"lng": 116.692769,
	"lat": 40.173307,
	"count": 44
}, {
	"lng": 116.287888,
	"lat": 39.928531,
	"count": 45
}, {
	"lng": 116.386502,
	"lat": 39.922747,
	"count": 46
}, {
	"lng": 116.236773,
	"lat": 40.218341,
	"count": 47
}, {
	"lng": 116.490636,
	"lat": 39.804253,
	"count": 48
}, {
	"lng": 116.391095,
	"lat": 39.925791,
	"count": 49
}, {
	"lng": 116.472402,
	"lat": 39.769178,
	"count": 50
}, {
	"lng": 116.38657,
	"lat": 39.956731,
	"count": 51
}, {
	"lng": 116.427536,
	"lat": 39.943671,
	"count": 52
}, {
	"lng": 116.374547,
	"lat": 39.967588,
	"count": 53
}, {
	"lng": 116.380383,
	"lat": 39.871634,
	"count": 54
}, {
	"lng": 116.376092,
	"lat": 39.965485,
	"count": 55
}, {
	"lng": 116.352424,
	"lat": 39.91811,
	"count": 56
}, {
	"lng": 116.020157,
	"lat": 40.348526,
	"count": 57
}, {
	"lng": 116.416201,
	"lat": 39.951736,
	"count": 58
}, {
	"lng": 116.405392,
	"lat": 39.908738,
	"count": 59
}, {
	"lng": 116.49238,
	"lat": 39.926248,
	"count": 60
}, {
	"lng": 116.389282,
	"lat": 39.988391,
	"count": 61
}, {
	"lng": 116.396683,
	"lat": 39.923487,
	"count": 62
}, {
	"lng": 116.41718,
	"lat": 39.905213,
	"count": 63
}, {
	"lng": 116.321512,
	"lat": 39.913192,
	"count": 64
}, {
	"lng": 116.260028,
	"lat": 40.03353,
	"count": 65
}, {
	"lng": 116.394846,
	"lat": 39.911168,
	"count": 66
}, {
	"lng": 116.374767,
	"lat": 39.96608,
	"count": 67
}, {
	"lng": 116.6841,
	"lat": 39.909762,
	"count": 68
}, {
	"lng": 116.3838,
	"lat": 39.95811,
	"count": 69
}, {
	"lng": 116.39243,
	"lat": 40.01143,
	"count": 70
}];

					var heatmap; // 热力图
					amap.plugin(["AMap.HeatMap"], function() {
						//初始化heatmap对象
						heatmap = new AMap.HeatMap(amap, {
							radius: 25, //给定半径
							opacity: [0, 0.8]
							/*,
							gradient:{
							    0.5: 'blue',
							    0.65: 'rgb(117,211,248)',
							    0.7: 'rgb(0, 255, 0)',
							    0.9: '#ffea00',
							    1.0: 'red'
							}
							 */
						});
						//设置数据集：该数据为北京部分“公园”数据
						heatmap.setDataSet({
							data: points,
							max: 100
						});
					});

					// 地图缩放事件
					amap.on('zoomend', (e) => {
						let mapZoom = amap.getZoom()
						console.log(mapZoom)
						if (mapZoom < 13) {
							heatmap.show()
						}else{
							heatmap.hide()
						}
					});
					amap.on("complete", function() {
						console.log("地图加载完成！");
					});

					// 地图拖拽事件
					amap.on('dragend', (e) => {

					});
					heatmap.hide()
				})
			},
			// 热力图事件
			getHeatMap() {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.map-item {
		padding: 20rpx;
		border-radius: 10rpx;
	}

	.map-choose-active {
		background-color: #eeeeee !important;
	}

	.map-choose-popup {
		width: 160rpx;
		padding: 30rpx;
	}

	.map-search-item {
		padding: 30rpx 0;
		border-bottom: 1px solid #DBDBDB;
	}

	.map-search-list {
		height: 700rpx;
		overflow-y: auto;
	}

	.map-search-popup {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 900rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	// 搜索
	.message-info-imageView {
		position: absolute;
		top: -106rpx;
		right: 0;
	}

	.message-info-texticon {
		position: absolute;
		right: 30rpx;
		width: 15rpx;
		height: 15rpx;
		background: rgba(0, 0, 0, 0.49);
		clip-path: polygon(100% 0, 0 0, 51% 100%);
	}

	.message-info-text {
		background: rgba(0, 0, 0, 0.49);
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 12px;
		color: #FFFFFF;
	}

	.riskInfo-list-image {
		width: 400rpx;
		height: 400rpx;
		position: absolute;
		bottom: 0rpx;
		right: 0rpx;
	}

	.riskInfo-image-view {
		width: 100%;
		margin-top: 30rpx;
	}

	.riskInfo-image {
		width: 280rpx;
		height: 200rpx;
		flex-shrink: 0;
		margin-right: 20rpx;
	}

	.message-info-view {
		position: absolute;
		top: -15rpx;
		right: 20rpx;
		width: 40rpx;
		height: 40rpx;
	}

	// 风险弹窗详情展示弹窗

	.level-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
	}

	.class-icon-view {
		width: 90rpx;
		height: 50rpx;
		font-weight: 400;
		font-size: 26rpx;
		color: #FFFFFF;
		background: #4B6DFD;
		border-radius: 25rpx 25rpx 25rpx 25rpx;
		border: 1rpx solid #4B6DFD;
		margin-right: 20rpx;
	}

	.risk-popup-center {
		margin-top: 30rpx;
		// padding-bottom: 30rpx;
	}

	.risk-popup-iconview {
		width: 90rpx;
		height: 7rpx;
		background: #D5D5D5;
		border-radius: 4rpx 4rpx 4rpx 4rpx;
	}

	.risk-popup-view1 {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 1450rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	.risk-popup-view {
		width: 95%;
		padding: 30rpx 20rpx;
		height: 500rpx;
		background-color: #FFFFFF;
		position: absolute;
		bottom: 0;
		left: 0;
		z-index: 100;
	}

	// 风险弹窗

	.map-coordinate-view {
		position: absolute;
		bottom: 480rpx;
		right: 20rpx;
		padding: 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
		z-index: 100;
		border-radius: 20rpx;
	}

	.map-choose-image3View {
		position: absolute;
		bottom: 660rpx;
		right: 20rpx;
	}

	.map-choose-image3 {
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	.map-choose-image2 {
		position: absolute;
		bottom: 780rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	.map-choose-image1 {
		position: absolute;
		top: 380rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	.map-choose-image {
		position: absolute;
		top: 260rpx;
		right: 20rpx;
		width: 100rpx;
		height: 100rpx;
		flex-shrink: 0;
		z-index: 100;
	}

	.map {
		position: relative;
	}

	.map-title-view {
		position: absolute;
		top: 30rpx;
		left: 20rpx;
		z-index: 100;
		width: 95%;
	}

	.map-title-item {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		// background: url('../../static/index/01.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}

	.map-title-item1 {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		// background: url('../../static/index/02.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}

	.map-title-item2 {
		width: 190rpx;
		height: 120rpx;
		padding: 20rpx;
		flex-shrink: 0;
		// background: url('../../static/index/03.png') no-repeat;
		background-size: 100% 100%;
		border-radius: 14rpx;
		overflow: hidden;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.11);
	}
</style>